<template>
  <div class="app-container">

    <div class="filter-container">
      <el-form :inline="true">
        <el-form-item label="接入单位">
          <el-select v-model="deviceListQuery.item.userInfoId" placeholder="请选择一个接入单位" clearable @change="selectTrigger"
            @clear="clearCompany" filterable>
            <el-option v-for="(item,index) in companyList" :key="index" :label="item.deviceName" :value="item.deviceMac">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="测点">
          <el-select v-model="historyListQuery.item.deviceMac" placeholder="请选择一个测点" clearable
            @change="selectTriggerDevice" filterable>
            <el-option v-for="(item,index) in deviceList" :key="index+'device'" :label="item.deviceName"
              :value="item.deviceMac">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="上报周期">
          <el-date-picker v-model="listQuery.item.zhouqiArr" type="daterange" align="right" unlink-panels
            value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
            :picker-options="pickerOptions" @change="dateChange">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="success" icon="el-icon-search" @click="handleFilter" :loading="btnLoading">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

    <el-collapse accordion class="date-view" v-model="activiteIndex" @change="handleChange">
      <el-collapse-item v-for="(item,index) in list" :key="index" :name="index">
        <template slot="title">
          <span>
            [ {{item.environmentData.deviceMac +" ]    "+item.environmentData.data17}}
          </span>
          <span class="date">
            <i class="el-icon-time"></i>
            {{format(item.environmentData.syncTime)}}
          </span>
        </template>
        <!-- <div v-if="item.deviceInfo">{{item.deviceInfo.data10}}</div> -->
        <div class="details-device-info" v-if="item && dataType == '1' || dataType == '2'">
          <div class="mdiv-box">
            <label class="label-box-font border-box">浓度值（mg/m³）</label>
            <div class="border-box">
              <label class="label-box-font margin-left-10 ">
                <span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>油烟：{{item.environmentData.data1}}</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>颗粒物：{{item.environmentData.data2}}</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>NMHC：{{item.environmentData.data3}}</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green"></span>
                </span>温度：{{item.environmentData.data7}}℃</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>湿度：{{item.environmentData.data8}}%</label>
                <label class="label-box-font margin-left-10" style="float: right;">
                </span>{{item.environmentData.syncTime}}</label>
            </div>
          </div>
          <div class="mdiv-box-1">
            <div class="mdiv-box">
              <label v-if="item.environmentData.data9 === '1'" class="label-box-font border-box">净化器（运行中）</label>
              <label v-else class="label-box-font border-box">净化器（未运行）</label>
              <div class="border-box">
                <label class="label-box-font margin-left-10"><span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>电压：{{item.environmentData.dcdy}}V</label>
                <label class="label-box-font margin-left-10"><span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>电流：{{item.environmentData.data12}}A</label>
                <label v-if="item.environmentData.data13*1 > 200" class="label-box-font margin-left-10"
                  style="color: red;"><span class="svg-container red">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>压差：{{item.environmentData.data13}}Pa</label>
                <label v-else class="label-box-font margin-left-10"><span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>压差：{{item.environmentData.data13}}Pa</label>
                  <label  v-if="item.environmentData.data9 === '1'" class="label-box-font margin-left-10">排风机（运行中）</label>
                  <label v-else class="label-box-font margin-left-10">排风机（未运行）</label>
                  <label class="label-box-font margin-left-10">电流：{{item.environmentData.data11}}A</label>
              </div>
            </div>
            <!-- <div class="mdiv-box" style="width: 50%;">
              <label  v-if="item.environmentData.data9 === '1'" class="label-box-font border-box">排风机（运行中）</label>
              <label v-else class="label-box-font  border-box">排风机（未运行）</label>
              <label class="label-box-font border-box">电流：{{item.environmentData.data11}}A</label>
            </div> -->
          </div>

        </div>
        <div class="details-device-info" v-else-if="item && dataType == '3' || dataType == '4'">
          <div class="mdiv-box">
            <label class="label-box-font border-box">浓度值（mg/m³）</label>
            <div class="border-box">
              <label class="label-box-font margin-left-10 ">
                <span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>油烟：{{item.environmentData.data1}}</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>颗粒物：{{item.environmentData.data2}}</label>
              <label class="label-box-font margin-left-10"><span class="svg-container green">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>NMHC：{{item.environmentData.data3}}</label>
                <label class="label-box-font margin-left-10" style="float: right;">
                </span>{{item.environmentData.syncTime}}</label>
            </div>
          </div>
          <div class="mdiv-box border-box" v-show ="dataType == 3 || dataType == 4">
            <label class="label-box-font border-box" style="width: 120px;">烟道参数</label>
            <div class="border-box" style="flex-direction: column; display: inline-flex;">
              <div>
                <label class="label-box-font marage-left-10">采样流量：{{item.environmentData.data7}}L/min</label>
                <label class="label-box-font marage-left-10">大气压强：{{item.environmentData.data8}}kPa</label>
                <label class="label-box-font marage-left-10">烟气动压：{{item.environmentData.data9}}Pa</label>
              <!-- </div> -->
              <!-- <div class="marage-top-5"> -->
                <label class="label-box-font marage-left-10 marage-top-5">烟气静压：{{item.environmentData.data10}}kPa</label>
                <label class="label-box-font marage-left-10 marage-top-5">烟气流速：{{item.environmentData.data11}}m/s</label>
                <label class="label-box-font marage-left-10 ">风量：{{item.environmentData.data12}}L/min</label>
              </div>
            <div class="marage-top-5">
              <label class="label-box-font marage-left-10 marage-top-5" v-if = "dataType == 3">加热温度：{{item.environmentData.data13}}℃</label>
            <label class="label-box-font marage-left-10 marage-top-5" v-if = "dataType == 3">含湿量：{{item.environmentData.data14}}%</label>
            <label class="label-box-font marage-left-10 marage-top-5" v-if = "dataType == 3">稀释流量：{{item.environmentData.data15}}L/min</label>
            </div>
       </div>
        </div>




          <div class="mdiv-box-1">
            <div class="mdiv-box" v-if="dataType == 1 || dataType == 2">
              <label v-if="item.environmentData.data9 === '1'" class="label-box-font border-box">净化器（运行中）</label>
              <label v-else class="label-box-font border-box">净化器（未运行）</label>
              <div class="border-box">
                <label class="label-box-font margin-left-10"><span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>电压：{{item.environmentData.dcdy}}V</label>
                <label class="label-box-font margin-left-10"><span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>电流：{{item.environmentData.data12}}A</label>
                <label v-if="item.environmentData.data13*1 > 200" class="label-box-font margin-left-10"
                  style="color: red;"><span class="svg-container red">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>压差：{{item.environmentData.data13}}Pa</label>
                <label v-else class="label-box-font margin-left-10"><span class="svg-container green">
                    <svg-icon icon-class="my-dot"></svg-icon>
                  </span>压差：{{item.environmentData.data13}}Pa</label>
                <label  v-if="item.environmentData.data9 === '1'" class="label-box-font margin-left-10">排风机（运行中）</label>
              <label v-else class="label-box-font margin-left-10">排风机（未运行）</label>
              <label class="label-box-font margin-left-10">电流：{{item.environmentData.data11}}A</label>
              </div>
            </div>
            <!-- <div class="mdiv-box" style="width: 100%;" v-if="dataType == 1 || dataType == 2">
              <label  v-if="item.environmentData.data9 === '1'" class="label-box-font border-box">排风机（运行中）</label>
              <label v-else class="label-box-font  border-box">排风机（未运行）</label>
              <label class="label-box-font border-box">电流：{{item.environmentData.data11}}A</label>
            </div> -->
            <div class="mdiv-box" v-else-if="dataType == 3 || dataType == 4">
              <label v-if="item.lists[0].data8 === '1'" class="label-box-font border-box">净化器（运行中）</label>
              <label  v-else class="label-box-font border-box">净化器（未运行）</label>
              <label v-if="item.lists[0].data7 === '1'" class="label-box-font border-box">排风机（运行中）</label>
              <label v-else class="label-box-font  border-box">排风机（未运行）</label>
            </div>
          </div>
        </div>


        <div v-if="item.lists && item.lists.length > 0 ">
          <el-table v-if="dataType == 1" :data="item.lists" stripe style="width: 100%">
            <el-table-column type="index" label="#" width="80">
            </el-table-column>
            <el-table-column prop="data1" label="电场" width="100">
            </el-table-column>
            <el-table-column label="一次电压" width="140">
              <template slot-scope="scope">
                <span>{{item.environmentData.dcdy}}V</span>
              </template>
            </el-table-column>
            
            <!-- <el-table-column label="一次电流" width="140">
              <template slot-scope="scope">
                <span>{{item.environmentData.data12}}A</span>
              </template>
            </el-table-column> -->
            <el-table-column prop="data2" label="二次电压" width="140">
              <template slot-scope="scope">
                <span v-if=" scope.row.data2 !='x' && scope.row.data2 !='' && (scope.row.data2 *1) <= 9"
                style="color: red;">{{scope.row.data2}}kV</span>
              <span v-else>{{scope.row.data2}}kV</span>
              </template>
            </el-table-column>
            <el-table-column label="二次电流" width="140">
              <template slot-scope="scope">
                <span>{{scope.row.data3}}mA</span>
              </template>
            </el-table-column>
            <el-table-column label="二次功率" width="140">
              <template slot-scope="scope">
                <span>{{scope.row.data4}}W</span>
              </template>
            </el-table-column>
  
            <el-table-column label="保护" width="50">
              <template slot-scope="scope" v-if="scope.row.data7 !=='' ">
                <span class="svg-container red" v-if="scope.row.data7 === '0'">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
                <span class="svg-container green" v-else>
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="开路" width="50">
              <template slot-scope="scope" v-if="scope.row.data6 !=='' && scope.row.data7 !==''">
                <span class="svg-container red" v-if="scope.row.data6 === '0'">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
                <span class="svg-container green" v-else>
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="短路" width="50">
              <template slot-scope="scope" v-if="scope.row.data8 !=='' ">
                <span class="svg-container red" v-if="scope.row.data8 === '1'">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
                <span class="svg-container green" v-else>
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </template>
            </el-table-column>
            <el-table-column label="超温" width="50">
              <template slot-scope="scope" v-if="scope.row.data9 !=='' ">
                <span class="svg-container red" v-if="scope.row.data9 === '1'">
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
                <span class="svg-container green" v-else>
                  <svg-icon icon-class="my-dot"></svg-icon>
                </span>
              </template>
            </el-table-column>
          </el-table>
          <el-table v-else-if="dataType == 2" :data="item.lists" stripe style="width: 100%">
            <el-table-column type="index" label="#" width="80">
            </el-table-column>
            <el-table-column prop="data1" label="电场" width="100">
            </el-table-column>
            <el-table-column label="一次电压" width="140">
              <template slot-scope="scope">
                <span>{{item.environmentData.dcdy}}V</span>
              </template>
            </el-table-column>
            <el-table-column label="一次电流" width="140">
              <template slot-scope="scope">
                <span>{{scope.row.data3}}A</span>
              </template>
            </el-table-column>
            <el-table-column prop="data5" label="二次电压" width="140">
              <template slot-scope="scope">
                <span v-if=" scope.row.data5 !='x' && scope.row.data5 !='' && (scope.row.data5 *1) <= 9"
                style="color: red;">{{scope.row.data5}}kV</span>
              <span v-else>{{scope.row.data5}}kV</span>
              </template>
            </el-table-column>
            <el-table-column label="二次电流" width="140">
              <template slot-scope="scope">
                <span>{{scope.row.data6}}mA</span>
              </template>
            </el-table-column>
            <el-table-column label="二次功率" width="140">
              <template slot-scope="scope">
                <span>{{scope.row.data4}}W</span>
              </template>
            </el-table-column>
          </el-table>
          <el-table v-else-if="dataType == 3 || dataType == 4" :data="item.lists" stripe style="width: 100%">
            <el-table-column type="index" label="#" width="80">
            </el-table-column>
            <el-table-column prop="data1" label="电场" width="100">
            </el-table-column>
            <el-table-column label="一次电压" width="140">
              <template slot-scope="scope">
                <span>{{scope.row.data2}}V</span>
              </template>
            </el-table-column>
            <el-table-column label="一次电流" width="140">
              <template slot-scope="scope">
                <span>{{scope.row.data3}}A</span>
              </template>
            </el-table-column>
            <el-table-column prop="data5" label="二次电压" width="140">
              <template slot-scope="scope">
                <span v-if=" scope.row.data5 !='x' && scope.row.data5 !='' && (scope.row.data5 *1) <= 9"
                style="color: red;">{{scope.row.data5}}kV</span>
              <span v-else>{{scope.row.data5}}kV</span>
              </template>
            </el-table-column>
            <el-table-column label="二次电流" width="140">
              <template slot-scope="scope">
                <span>{{scope.row.data6}}mA</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- <div v-if="item.environmentData && item.lists.length > 0 " class="div-hint font-size-14">
            图例：
            <div class="font-size-14 margin-left-10">
              <span class="svg-container red">
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
              告警
            </div>
            <div class="font-size-14 margin-left-10">
              <span class="svg-container green">
                <svg-icon icon-class="my-dot"></svg-icon>
              </span>
              正常
            </div>
          </div> -->
        </div >
        <div v-else class="label-box-font font-size-14" style="flex-direction: column; display: inline-flex;">
          <label class="label-box-font font-size-14">
            未获取到电场信息.
          </label>
          <label class="label-box-font font-size-14">
            原因之一：未录入电场设备信息
          </label class="label-box-font font-size-14">
          <label>
            原因之二：未采集电场数据信息
          </label>
        </div>
      </el-collapse-item>
    </el-collapse>

    <!--  -->
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChangeHistory" @current-change="handleCurrentChangeHistory"
        :current-page="historyListQuery.page.num" :page-size="historyListQuery.page.size"
        layout="total, prev, pager, next, jumper" :total="historyListQuery.page.total">
      </el-pagination>
    </div>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :close-on-click-modal="false"
      width="100%">
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">关闭</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { getDetailsByDeviceMac, queryDeviceByUserInfoIdPage } from '@/api/isp'
  import { getCompany } from '@/api/map'
  import { getHistoryList } from '@/api/history'
  import { mapGetters } from 'vuex'
  import Vue from 'vue'
  import areaList from '../../../static/json/area.json'
  var timeago = require('timeago.js')
  export default {
    name: 'IspIndex',
    computed: {
      ...mapGetters([
        'token'
      ])
    },
    components: {
    },
    data() {
      return {
        dataType: '', //协议类型
        ycdy: '',
        btnLoading: false,
        dialogFormVisible: false,
        dialogStatus: '',
        textMap: {
          view: '油烟数据',
          viewJHQ: '净化器数据'
        },
        dialogVisible: false,
        temp: {
          username: '', // 负责人姓名
          adminstrativeArr: [],
          adminstrative: '', // 行政区域
          address: '', // 详细地址
          company: '', // 公司名称
          job: '', // 所在岗位
          telephone: '', // 联系电话
          creditCode: '', // 信用代码
          dischargePermit: '', // 排污许可
          userId: '' // 当前登录人ID
        },
        listLoading: false,
        list: [],
        listQuery: {
          page: {
            num: 1,
            total: 0,
            size: 99999
          },
          item: {
            userId: '',
            company: ''
          }
        },
        historyListQuery: {
          page: {
            num: 1,
            total: 0,
            size: 10
          },
          item: {
            deviceMac: '',
            startTime: '',
            endTime: ''
          }
        },
        deviceListQuery: {
          page: {
            num: 1,
            total: 0,
            size: 999999
          },
          item: {
            userInfoId: ''//企业ID
          }
        },
        activiteIndex: '[0]', //当前折叠
        // 行政区域数据
        areaList,
        companyList: [],
        deviceList: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        }
      }
    },
    watch: {
      // 表单内容体
      temp: {
        handler: function(val, oldVal) {
        },
        deep: true
      },
      // 搜索条件体
      listQuery: {
        handler: function(val, oldVal) {
        },
        deep: true
      }
      // historyListQuery: {
      //   hander: function(val, oldVal) {

      //   },
      //   deep: true
      // }
    },
    created() {
      this.listQuery.item.userId = this.token
      this.temp.userId = this.token * 1
      // 取列表
      this.getList()
      this.getYCDY()
    },
    activated() {
      // 取列表
      this.getList()
    },
    deactivated() {
    },
    methods: {
      // format(val) {
      //   // 不自动更新
      //   // var timeagoInstance = timeago// 实例
      //   var time = timeago.format(val, 'zh_CN')
      //   return time
      // },
      format(val) {
        // 不自动更新
        console.log('var :>> ', val)
        // var timeagoInstance = timeago// 实例
        var time = timeago.format(val, 'zh_CN')
        if (time.indexOf('后') > -1) {
          time = '刚刚'
        }
        return time
      },
      handleChange(val) {
        // var _that = this
        if (val !== '') {
          // var info = _that.list[val]
          // _that.getDeviceDetails(info.deviceMac, val)
          //  info.diviceMac;
        }
      },
      clearCompany() {
        this.historyListQuery.item.deviceMac = ''
        this.deviceList = []
      },
      getYCDY() {
        var start = Math.floor(Math.random() * (223 - 218)) + 218
        var end = Math.floor(Math.random() * (99 - 0)) + 0
        if (end === 0) {
          return start
        } else if (end < 10) {
          return start + '.' + end + '0'
        } else {
          return start + '.' + end
        }
      },
      getDeviceDetails(deviceMac, index) {
        var _that = this
        getDetailsByDeviceMac(deviceMac).then(res => {
          const resList = res.data
          var dcList = []
          var deviceInfo = ''
          for (let i = 0; i < resList.length; i++) {
            const element = resList[i]
            if (element.data1.indexOf('Unit') === -1) {
              deviceInfo = element
            } else {
              dcList.push(element)
            }
          }
          Vue.set(_that.list[index], 'deviceInfo', deviceInfo)
          Vue.set(_that.list[index], 'dcList', dcList)
        }).catch(err => {
          err
        })
      },
      // 选择地区
      handleCityChange(value) {
      },
      // 改变每页显示条数
      // handleSizeChange(val) {
      //   this.listQuery.page.size = val
      //   this.getList()
      // },
      // 改变每页显示条数
      handleSizeChangeHistory(val) {
        this.historyListQuery.page.size = val
        this.getHistoryList()
      },
      // 改变当前页面
      handleCurrentChangeHistory(val) {
        console.log(val)
        this.historyListQuery.page.num = val
        this.getHistoryList()
      },
      // // 改变当前页面
      // handleCurrentChange(val) {
      //   this.listQuery.page.num = val
      //   this.getList()
      // },
      // 搜索
      handleFilter() {
        this.historyListQuery.page.num = 1
        if (this.historyListQuery.item.deviceMac === '' || this.historyListQuery.item.startTime === '' || this.historyListQuery.item.endTime === '') {
          return
        }
        this.getHistoryList()
      },
      // 获取历史数据
      getHistoryList() {
        this.btnLoading = true
        this.list = []
        getHistoryList(this.historyListQuery).then(res => {
          this.btnLoading = false
          var newList = []
          for (let i = 0; i < res.data.length; i++) {
            const element = res.data[i]
            var newItem = element
            newItem.environmentData.dcdy = this.getYCDY()
            newList.push(newItem)
          }
          this.list = newList
          this.historyListQuery.page.total = res.totalData
          this.dataType = res.dataType
          console.log('this.list :>> ', this.list)
          console.log('res :>> ', res)
        }).catch(err => {
          this.btnLoading = false
          err
        })
      },
      // 获取列表
      getList() {
        this.listLoading = true
        return getCompany(this.listQuery.item.userId, this.listQuery.item.company, this.listQuery.page.num, this.listQuery.page.size).then(response => {
          // this.list = response.data
          this.companyList = response.data
          this.listQuery.page.total = response.totalData
          this.listLoading = false
        }).catch(err => {
          err
          this.listLoading = false
        })
      },
      // 重置数据
      resetTemp() {
        this.temp = {
          username: '', // 负责人姓名
          adminstrativeArr: [],
          adminstrative: '', // 行政区域
          address: '', // 详细地址
          company: '', // 公司名称
          job: '', // 所在岗位
          telephone: '', // 联系电话
          creditCode: '', // 信用代码
          dischargePermit: '', // 排污许可
          userId: this.token * 1 // 当前登录人ID
        }
        return this.temp
      },
      // 查看详情 - 油烟数据
      handleView(row) {
        this.temp = Object.assign({}, this.resetTemp(), row) // copy obj
        this.dialogStatus = 'view'
        this.dialogFormVisible = true
      },
      // 查看详情 - 净化器数据
      handleViewJHQ(row) {
        this.temp = Object.assign({}, this.resetTemp(), row) // copy obj
        this.dialogStatus = 'viewJHQ'
        this.dialogFormVisible = true
      },
      selectTrigger(val) {
        this.historyListQuery.item.deviceMac = ''
        if (val === '') {
          return
        }
        console.log('val :>> ', val)
        this.deviceListQuery.item.userInfoId = val
        this.getDeviceList()
      },
      selectTriggerDevice(val) {
        if (val === '') {
          return
        }
        this.historyListQuery.item.deviceMac = val
      },
      dateChange(val) {
        if (val !== '') {
          this.historyListQuery.item.startTime = val[0]
          var end = val[1]
          this.historyListQuery.item.endTime = end.replace('00:00:00', '23:59:59')
        }
      },
      getDeviceList() {
        this.deviceMac = []
        queryDeviceByUserInfoIdPage(this.deviceListQuery.item.userInfoId *
      1).then(res => {
          this.deviceList = res.data
        }).catch(err => {
          err
        })
      }
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .date-view {
    /deep/ .el-collapse-item {
      border-right: 1px solid #EBEEF5;
      border-left: 1px solid #EBEEF5;
      padding: 0 20px;
    }

    /deep/ .el-collapse-item__header {
      position: relative;
      border-bottom: 1px solid #EBEEF5;

      .date {
        position: absolute;
        right: 40px;
        top: 0;
      }
    }
  }

  .label-box-font {
    font-size: 14px;
    color: #303133;
  }

  .border-box {
    padding: 5px;
    display: block;
  }

  .margin-left-10 {
    margin-left: 40px;
  }

  .div-hint {
    display: inline-flex;
    flex-direction: row;
    margin-top: 10px;
    margin-left: 30px;
    margin-bottom: 10px;
  }

  .font-size-14 {
    font-size: 14px;
  }

  .details-device-info {
    background-color: #ffffff;
    /* height: 100px; */
    padding-top: 10px;
  }

  .mdiv-box {
    width: 100%;
    padding-left: 15px;
    padding-right: 20px;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .mdiv-box-1 {
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
  }
</style>